/*
 * @Author: 灰灰
 * @Date: 2021-12-31 11:47:32
 * @LastEditors: Please set LastEditors
 * @LastEditTime: 2022-01-01 19:39:26
 * @Description: 
 */

export default {
  data() {
    return {
      chartOption: {
        // 标题配置
        title: {
          text: '', //主标题
          textStyle: {
            color: '#333',
            fontSize: 15,
            fontWeight: 'bold'
          },
          subtext: '', // 副标题
          subtextStyle: {}
        },
        // 图例类型
        legend: {
          // left: 'center', // 图例组件离容器左侧的距离。left 的值可以是像 20 这样的具体像素值，可以是像 '20%' 这样相对于容器高宽的百分比，也可以是 'left', 'center', 'right'。
          // top: '', //图例组件离容器上侧的距离。top 的值可以是像 20 这样的具体像素值，可以是像 '20%' 这样相对于容器高宽的百分比，也可以是 'top', 'middle', 'bottom'。
          // right: '', // 图例组件离容器右侧的距离。right 的值可以是像 20 这样的具体像素值，可以是像 '20%' 这样相对于容器高宽的百分比。
          data: []
        },
        // 提示框组件
        tooltip: {
          show: true,
          trigger: 'axis', // 触发类型  item-数据项图形触发，主要在散点图，饼图等无类目轴的图表中使用，axis-坐标轴触发，主要在柱状图，折线图等会使用类目轴的图表中使用。none-什么都不触发。
        },
        // 坐标系的位置 可以是{}，也可以是[]，[]用于多个坐标系的位置大小等配置
        grid: {
          // left: '', // 20, 10%, grid 组件离容器左侧的距离
          // top: '', // grid 组件离容器上侧的距离
          // right: '', // grid 组件离容器右侧的距离
          // bottom: '', // grid 组件离容器下侧的距离
          // width: '', //grid 组件 宽度
          // height: '', //grid 组件 高度
        },
        // 组件 用于区域缩放，从而能自由关注细节的数据信息，或者概览数据整体，或者去除离群点的影响
        dataZoom: {

        },
        // 直角坐标系 grid 中的 x 轴，一般情况下单个 grid 组件最多只能放上下两个 x 轴，多于两个 x 轴需要通过配置 offset 属性防止同个位置多个 x 轴的重叠。
        xAxis: {
          show: true, // 是否显示 x 轴。
          type: 'categroy', // 坐标轴类型，value-数值轴，适用于连续数据。categroy-类目轴，适用于离散的类目数据， time- 时间轴，log- 对数轴
          // gridIndex: 1, //x 轴所在的 grid 的索引，默认位于第一个 grid。
          // position: 'bottom', // x 轴的位置 top、bottom
          // name: '名称', // 坐标轴名称。
          // nameLocation: 'end', // 坐标轴名称显示位置。 start、center、middle、end
          // nameTextStyle: {}, // 坐标轴名称的文字样式。
          // nameGap: 15, //坐标轴名称与轴线之间的距离。
          // nameRotate: 10, //坐标轴名字旋转，角度值。
          // inverse: false, // 是否是反向坐标轴。
          splitLine: { // 坐标轴在grid 区域中的分隔线
            show: false, // 是否显示分隔线
            // interval: 0, // 分割线显示间隔
          },
          axisLabel: { // 坐标轴刻度标签的相关设置
            show: true, // 是否显示刻度标签
            interval: 0, // 刻度标签 显示间隔 
            // inside: false, // 刻度标签 是否朝内，默认朝外 false
            // rotate: 0, // 刻度标签旋转的角度，在类目轴的类目标签显示不下的时候可以通过旋转防止标签之间重叠。旋转的角度从 -90 度到 90 度。
            // color: 'red', // 刻度标签文字的颜色 
            // fontSize: 12, // 刻度标签文字的大小
            // align: 'center', // 文字水平对齐方式，默认自动。
          },
          axisTick: { // 坐标轴刻度相关设置。
            show: true, //是否显示坐标轴刻度。
          },
          axisLine: { //坐标轴轴线相关设置。
            show: true, //是否显示坐标轴轴线。
            lineStyle: { // 坐标轴轴线的 样式
              color: '#333'
            }
          }
        },
        // 直角坐标系 grid 中的 y 轴，一般情况下单个 grid 组件最多只能放左右两个 y 轴，多于两个 y 轴需要通过配置 offset 属性防止同个位置多个 Y 轴的重叠。
        yAxis: {
          show: true, // 是否显示 y 轴。
          type: 'categroy', // 坐标轴类型，value-数值轴，适用于连续数据。categroy-类目轴，适用于离散的类目数据，time- 时间轴，log- 对数轴
          // gridIndex: 1, //y 轴所在的 grid 的索引，默认位于第一个 grid。
          // position: 'left', // x 轴的位置 left、right
          // name: '名称', // 坐标轴名称。
          // nameLocation: 'end', // 坐标轴名称显示位置。 start、center、middle、end
          // nameTextStyle: {}, // 坐标轴名称的文字样式。
          // nameGap: 15, //坐标轴名称与轴线之间的距离。
          // nameRotate: 10, //坐标轴名字旋转，角度值。
          // inverse: false, // 是否是反向坐标轴。
          splitLine: { // 坐标轴在grid 区域中的分隔线
            show: false, // 是否显示分隔线
            // interval: 0, // 分割线显示间隔
          },
          axisLabel: { // 坐标轴刻度标签的相关设置
            show: true, // 是否显示刻度标签
            interval: 0, // 刻度标签 显示间隔 
            // inside: false, // 刻度标签 是否朝内，默认朝外 false
            // rotate: 0, // 刻度标签旋转的角度，在类目轴的类目标签显示不下的时候可以通过旋转防止标签之间重叠。旋转的角度从 -90 度到 90 度。
            // color: 'red', // 刻度标签文字的颜色 
            // fontSize: 12, // 刻度标签文字的大小
            // align: 'center', // 文字水平对齐方式，默认自动。
          },
          axisTick: { // 坐标轴刻度相关设置。
            show: true, //是否显示坐标轴刻度。
          },
          axisLine: { //坐标轴轴线相关设置。
            show: true, //是否显示坐标轴轴线。
            lineStyle: { // 坐标轴轴线的 样式
              color: '#333'
            }
          }
        },
        series: []
      }
    }
  }
}